<template>
  <!--测井记录选择器-->

  <el-card v-show="show">
    <template #header>
      <div class="card-header" style="display: flex; justify-content: center">
        <el-button class="button" @click="getView('左视图')" text>主视图</el-button>
        <el-button class="button" @click="getView('右视图')" text>左视图</el-button>
        <el-button class="button" @click="getView('俯视图')" text>俯视图</el-button>
        <el-button class="button" @click="getView('三维图')" text>三维图</el-button>
      </div>
    </template>
    <div>
      <!-- <a-select v-model:value="value1" :size="size" style="width: 200px" :options="options"></a-select> -->
      <div ref="chartContainer" style="width: 100%; height: 68vh"></div>
      <div style="display: flex; justify-content: flex-end;">
        <el-button class="button" style="color: blue; text-decoration: underline;" @click="download()"
          text>下载井眼轨迹附件</el-button>
      </div>
    </div>
  </el-card>
</template>
<script setup>
import { interWell } from "@/api/v3/mechanical.js";
import WellSurvey from "@/api/survey/survey.js";
import useApp from "@/hooks";
const { $, proxy } = useApp();
import * as echarts from "echarts";
import "echarts-gl";
const queryParams = ref({
  pageSize: 1000000,
  pageNum: 1,
  id: undefined,
  space: undefined,
});
const chartContainer = ref(null);
const fileId = ref(null);
const props = defineProps({
  data: Object,
});
watch(() => props.data, () => {
  getSurveyList()
  console.log("------三维图watch------");
}
);
const surveyList = ref([]);
const data = ref();
const show = ref(true);
function download() {
  window.open(`/dev-api/ufs/download/${fileId.value}`);
}
// 获取列表
function getSurveyList() {
  console.log('props.data', props.data);
  queryParams.value.wellId = props.data.wellId;
  // 补全参数
  // if(Validator.isNotEmpty(props.data)){
  //     queryParams.value.wellId = props.data.wellId
  // }
  WellSurvey.queryList(queryParams.value).then((res) => {
    console.log('三维图', res);
    surveyList.value = res.content;
    let arr = res.content;
    if (arr.length == 0) {
      $.showToast({
        title: "无测井记录",
        icon: "warning",
      });
      show.value = false;
    } else {
      fileId.value = res.content[0].dataId;
      show.value = true;
      getSurveyDetail(arr[0].id);
    }
  });
}
// 执行查询
function getSurveyDetail(id) {
  //queryParams.value.id = props.data.id
  queryParams.value.id = id;
  queryParams.value.space = 30;

  WellSurvey.latestSurvey(queryParams.value.wellId).then(response => {
    // console.log("response", response);
    if (response.wellId) {
      let isAddPoint = response.skew
      //每隔1米测深提供一个xyz轴
      interWell(queryParams.value.wellId, 1, isAddPoint).then((res) => {
        console.log("interWell", res);
        data.value = res.content;
        data.value.forEach((ele) => {
          ele.X = ele.north;
          ele.Y = ele.east;
          ele.Z = ele.true_vertical_depth;
        });
        renderChart(data.value);
      });
    }
  })
  // getInterpolation(queryParams.value).then((res) => {
  //   data.value = res.content;
  //   data.value.forEach((ele) => {
  //     ele.X = ele.north;
  //     ele.Y = ele.east;
  //     ele.Z = ele.true_vertical_depth;
  //   });
  //   renderChart(data.value);
  // });
}
onMounted(() => {
  getSurveyList();
});

const renderChart = (dataRows, type) => {
  const depth = dataRows[dataRows.length - 1].true_vertical_depth;
  const data = [[0, 0, 0]];
  let dataCasingOne = [];
  let dataCasingTwo = [];
  let dataCasingThree = [];

  dataRows.forEach((element) => {
    const x = element.X;
    const y = element.Y;
    const z = -element.Z;
    data.push([x, y, z]);
  });

  dataCasingOne = data.filter((e) => e[2] > -160);
  dataCasingTwo = data.filter((e) => e[2] > -331);
  dataCasingThree = data.filter((e) => e[2] > -1300);

  const chart = echarts.init(chartContainer.value);

  const option = {
    tooltip: {},
    backgroundColor: "#fff",
    visualMap: {
      show: false,
      dimension: 5,

      inRange: {},
    },
    xAxis3D: {
      type: "value",
      max: 1500,
      min: -1500,
    },
    yAxis3D: {
      type: "value",
      max: 1500,
      min: -1500,
    },
    zAxis3D: {
      type: "value",
      axisLabel: {
        formatter: function (value) {
          return Math.abs(value); //作为参数传递数字的绝对值
        },
      },
    },
    grid3D: {
      viewControl: {
        projection: "orthographic",
      },
    },
    series: [
      {
        type: "line3D",
        data: data,
        name: "井眼轨迹",
        lineStyle: {
          width: 21.59,
          color: "#000000",
        },
      },
    ],
  };
  //右视图
  const optionRight = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
      },
      showContent: false,
    },
    xAxis: {
      type: "value",
      inverse: true,
      max: depth / 2,
      min: -(depth / 2),
      axisLabel: "",
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: function (value) {
          return Math.abs(value);
        },
      },
    },
    dataZoom: [
      {
        type: "inside",
        start: 0,
        end: 100,
      },
      {
        type: "slider",
        start: 0,
        end: 100,
      },
    ],
    series: [
      {
        type: "line",
        data: data,
        // 变得圆滑
        smooth: true,
        // 隐藏折点
        showSymbol: false,
        encode: {
          x: 1,
          y: 2,
          tooltip: [1, 2],
        },
        lineStyle: {
          opacity: 1,
          color: "#000000",
          width: 8,
        },
      },
    ],
  };
  //俯视图
  const optionTop = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
      },
      showContent: false,
    },
    dataZoom: [
      {
        type: "inside",
        start: 0,
        end: 100,
      },
      {
        type: "slider",
        start: 0,
        end: 100,
      },
    ],
    xAxis: { type: "value", max: 1000, min: -1000 },
    yAxis: { type: "value", max: 1000, min: -1000 },
    series: [
      {
        type: "line",
        data: data,
        // 变得圆滑
        smooth: true,
        // 隐藏折点
        showSymbol: false,
        encode: {
          x: 0,
          y: 1,
          tooltip: [0, 1],
        },
        lineStyle: {
          opacity: 1,
          color: "#000000",
          width: 8,
        },
      },
    ],
  };
  //左视图（即主视图）
  const optionLeft = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
      },
      showContent: false,
    },
    dataZoom: [
      {
        type: "inside",
        start: 0,
        end: 100,
      },
      {
        type: "slider",
        start: 0,
        end: 100,
      },
    ],
    xAxis: {
      type: "value",
      name: "X",
      max: 1500,
      min: -1500,
      axisLabel: "",
    },
    yAxis: {
      type: "value",
      name: "Y",
      axisLabel: {
        formatter: function (value) {
          return Math.abs(value);
        },
      },
    },
    series: [
      {
        type: "line",
        data: data,
        // 变得圆滑
        smooth: true,
        // 隐藏折点
        symbolSize: 0.0000001,
        encode: {
          x: 0,
          y: 2,
        },
        lineStyle: {
          opacity: 1,
          color: "#000000",
          width: 8,
        },
      },
    ],
  };

  if (type == null || type === "三维图") {
    chart.clear();
    chart.setOption(option);
  } else if (type === "左视图") {
    chart.clear();
    chart.setOption(optionLeft);
  } else if (type === "右视图") {
    chart.clear();
    chart.setOption(optionRight);
  } else if (type === "俯视图") {
    chart.clear();
    chart.setOption(optionTop);
  }
};
function getView(type) {
  renderChart(data.value, type);
}
</script>

<style>
/* 样式可以根据需要自行调整 */
</style>
